<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->


<dom-module id="shop-my-trade-detail">
    <template>
        <style include="shop-common-styles">
            paper-icon-item{
                position: relative;
            }
            paper-icon-item a[slot=item-icon]{
                display: block;
            }
            paper-icon-item a[slot=item-icon] img{
                height: 50px;
                width: 50px;
            }
            paper-icon-item iron-icon{
                color: #666;
            }
            paper-item-body div[secondary]{
                font-size: 12px;
            }
            paper-icon-item paper-button{
                margin: 0px;
                background-color: #003366;
                color: white;
                font-size: 12px;
            }
            div[role=listbox] a{
                color: #000;
                text-decoration: none;
            }
            .info,.express-record,.take-by-self{
                padding: 10px 20px;
                margin-top: 10px;
                border-top: #ddd solid 1px;
            }
            .info p{
                display: grid;
                grid-template-columns: 70px auto;
                align-items: center;
            }
            .info p label{
                font-weight: 600;
            }
            div[role=listbox]{
                border-top:#ddd solid 1px;
            }
            .take-by-self,.express-record{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
            .take-by-self img{
                width:250px;
                height: 250px;
            }
            .refund-message{
                font-size: 12px;
                color: red;
                font-weight: bold;
            }
        </style>
        <app-route
        route="[[route]]"
        pattern="/:tradeid"
        data="{{routeData}}"></app-route>
        <plugin-message id="msg"></plugin-message>
        <paper-dialog id="refund" modal>
            <div class="message">
                <p><label>退款金额</label><span>[[refundMoney]]</span></p>
                <p>
                    <paper-textarea label="退款缘由" id="cause"></paper-textarea>
                </p>
            </div>
            <div class="buttons">
                <paper-button dialog-dismiss>取消</paper-button>
                <paper-button on-click="refundConfirm">确认</paper-button>
            </div>
         </paper-dialog>
        <plugin-xhr id="xhr_trade" url="[[app.apiHost]]/my.trade.get?trade_id=[[tradeId]]" response="{{trade}}"></plugin-xhr>
        <plugin-xhr id="xhr_trade_item" url="[[app.apiHost]]/my.trade.item.list?trade_id=[[tradeId]]" response="{{tradeItems}}"></plugin-xhr>
        <plugin-xhr id="xhr_area" url="[[app.apiHost]]/area.get.path" response="{{area}}"></plugin-xhr>
        <plugin-xhr id="xhr_express_record" url="[[app.apiHost]]/express.record.get" response="{{expressRecord}}"></plugin-xhr>
        <plugin-xhr id="xhr_express" url="[[app.apiHost]]/express.get" response="{{express}}"></plugin-xhr>
        <plugin-xhr id="xhr_refund" url="[[app.apiHost]]/my.trade.refund.submit"></plugin-xhr>
        <header>
            <h1>[[trade.result.title]]</h1>
            <p>编号：[[trade.result.serial_number]]</p>
            <p>应付：[[_money(trade.result.payable)]]，
                <template is="dom-if" if="[[trade.result.lucky]]"><strong>通过幸运免单成交</strong></template>
                <template is="dom-if" if="[[!trade.result.lucky]]">实付：[[_money(trade.result.pay_amount)]]</template>
            </p>
            <template is="dom-if" if="[[_equal(trade.result.status,0)]]">
                <template is="dom-if" if="[[!trade.result.paymented]]">
                    <p><plugin-payment on-success="_paymentSuccess" trade-id="[[trade.result.id]]"></plugin-payment></p>
                </template>
            </template>
            <template is="dom-if" if="[[_equal(trade.result.status,-1)]]">
                <p>订单已被取消</p>
            </template>
            <template is="dom-if" if="[[_equal(trade.result.status,1)]]">
                <p>订单交易成功</p>
            </template>
        </header>
        <template is="dom-if" if="[[!trade.result.take_by_self]]">
            <div class="info">
                <template is="dom-if" if="{{express}}">
                    <p>
                        <label>指定快递</label>
                        <span>[[express.result.name]]</span>
                    </p>
                </template>
                <template is="dom-if" if="{{trade.result.doorstep_service}}">
                    <h4 style="text-align: center;">您要求商家上门服务</h4>
                </template>
                <p>
                <label>联系地址</label>
                <span>[[area.result.path]][[trade.result.address]]</span>
                </p>
                <p>
                <label>联系人</label>
                <span>[[trade.result.contacts]]</span>
                </p>
                <p>
                <label>联系电话</label>
                <span>[[trade.result.telephone]]</span>
                </p>
            </div>
        </template>
        <template is="dom-if" if="[[trade.result.delivered]]">
            <div class="express-record">
                <template is="dom-if" if="[[expressRecord]]">
                    <p> 商家已通过<strong>[[expressRecord.result.express]]</strong>发货</p>
                </template>
                <template is="dom-if" if="[[!expressRecord]]">
                        <p>商家已确认交易</p>
                </template>
            </div>
        </template>
        
        <template is="dom-if" if="[[trade.result.take_by_self]]">
                <template is="dom-if" if="[[trade.result.paymented]]">
                    <div class="take-by-self">
                    
                    <template is="dom-if" if="[[!trade.result.delivered]]">
                        <template is="dom-if" if="[[!_equal(trade.refund_status,'SUCCESS')]]">
                            <img src="[[ladingCode]]" on-click="_openLadingCode"/>
                            <p>请向商家出示此交易码</p>
                            <p hidden="[[!trade.result.contacts]]">
                            <label>联系人：</label>
                            <span>[[trade.result.contacts]]</span>
                            </p>
                            <p hidden="[[!trade.result.telephone]]">
                            <label>联系电话：</label>
                            <span>[[trade.result.telephone]]</span>
                            </p>
                        </template>
                        <template is="dom-if" if="[[_equal(trade.refund_status,'SUCCESS')]]">
                            <p>订单已退款</p>
                        </template>
                    </template>
                    <template is="dom-if" if="[[trade.result.delivered]]">
                        <p>您已确认交易</p>
                    </template>
                    </div>
                </template>
                <template is="dom-if" if="[[_equal(trade.result.status,0)]]">
                    <template is="dom-if" if="[[!trade.result.paymented]]">
                        <div class="take-by-self">
                        <p>付款完毕后可获得交易二维码</p>
                        </div>
                    </template>
                </template>
        </template>
        
        <div role="listbox">
            <template is="dom-repeat" items="[[tradeItems.result]]" as="tradeItem">
                <paper-icon-item>
                    <a href="{{rootPath}}product-detail/{{tradeItem.product.id}}" slot="item-icon"><img src="[[_albumItem(tradeItem.product.album,0,100,100)]]"/></a>
                    <paper-item-body>
                      <div><a href="{{rootPath}}product-detail/{{tradeItem.product.id}}">[[tradeItem.product.name]]</a></div>
                      <div secondary>[[_displaySku(tradeItem.sku)]]，数量:[[tradeItem.amount]]，总额￥[[tradeItem.money]]</div>
                    </paper-item-body>
                    <template is="dom-if" if="[[tradeItem.refund_available]]">
                        <paper-button on-click="_refound">退款</paper-button>
                    </template>
                    <template is="dom-if" if="[[!tradeItem.refund_available]]">
                        <span class="refund-message">[[tradeItem.refund_message]]</span>
                    </template>
                </paper-icon-item>
            </template>
        </div>
    </template>

    <script>
        class ShopMyTradeDetail extends PluginElement {

            static get is() {
                return 'shop-my-trade-detail';
            }

            static get properties() {
                return {

                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged',
                        ladingCode:String
                    },
                    tradeItems:{
                        type:Object,
                        observer:"_tradeItemsChanged"
                    },
                        expressRecord:{
                        type:Object,
                        value:null
                    }
                }
            }
            ready(){
                super.ready();
            }
            _visibleChanged(visible) {
                if(visible){
                    let dom = this;
                    this.tradeId = this.routeData.tradeid;
                    this.$.xhr_trade.callback(function(){
                        if(!dom.trade.result.take_by_self){
                            dom.$.xhr_area.param("area_id",dom.trade.result.area_id).get();
                            if(dom.trade.result.express_record_id){
                               dom.$.xhr_express_record.param("record_id",dom.trade.result.express_record_id).get();
                            }
                            if(dom.trade.result.customer_selected_express_id){
                                dom.$.xhr_express.param("express_id",dom.trade.result.customer_selected_express_id).get();
                            }
                            
                        }else{
                            let scene = JSON.stringify({action:"takeGoods",tradeId:dom.tradeId,appId:app.appId});
                            dom.ladingCode = app.apiHost+"/wx.app.qrcode.appcenter.launch?&scene="+encodeURIComponent(scene)+"&width=550";
                        }
                    }).get();
                    this.$.xhr_trade_item.get();
                }
            }
            _displaySku(sku){
                let skuAyy = new Array();
                for(let n in sku){
                    if(n!="id"&&n!="@id"&&n!="amount"){
                       skuAyy.push(sku[n]);
                    }
                }
                return skuAyy.join("/");
            }
            _openLadingCode(e){
                this._viewImage(this.ladingCode);
            }
            _paymentSuccess(e){
                this.trade.result.paymented = true;
                this.notifyPath("trade.result.paymented");
            }
            _refound(e){
                let item = e.model.tradeItem;
                let dom = this;
                this.refundMoney = this._money(item.money);
                this.refundConfirm = function(e){
                    this.$.xhr_refund.param("trade_item_id",item.id).param("money",item.money).param("cause",this.$.cause.value?this.$.cause.value:"").callback(function(){
                        let index = dom.tradeItems.result.indexOf(item);
                        dom.set("tradeItems.result."+index+".refund_available",false);
                        dom.set("tradeItems.result."+index+".refund_message","退款正在处理中");
                        dom.$.refund.close();
                    }).post();
                    this.$.refund.close();
                }
                this.$.refund.open();
            }
            _checkRefund(index){
                let dom = this;
                let tradeItem = this.tradeItems.result[index];
                let xhr = new XMLHttpRequest();
                xhr.withCredentials = true;
                xhr.addEventListener("load",function(res){
                    let rs = JSON.parse(res.target.responseText);
                    dom.set("tradeItems.result."+index+".refund_available",rs.available);
                    dom.set("tradeItems.result."+index+".refund_message",rs.message);
                });
                xhr.open("GET",app.apiHost+"/my.trade.refund.check?trade_item_id="+tradeItem.id);
                xhr.send(null);
            }
            _tradeItemsChanged(tradeItems){
                for(let i=0;i<tradeItems.result.length;i++){
                    this._checkRefund(i);
                }
            }
        }

        customElements.define(ShopMyTradeDetail.is, ShopMyTradeDetail);

    </script>

</dom-module>
